<template>
  <div class="detail-header-wrap">
    <router-link class="back-link" to="/" tag="div" v-show="!isShowHeader">
      <span class="iconfont">&#xe675;</span>
    </router-link>

    <header class="detail-header" v-show="isShowHeader" :style="styleOpacity">
      <router-link class="header-back" to="/" tag="span">
        <span class="iconfont">&#xe675;</span>
      </router-link>

      <span class="header-title">亚龙湾热带天堂森林公园(AAAA景区)</span>
    </header>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";

export default {
  name: "HomeHeader",
  props: {},
  data(){
    return {
      isShowHeader: false,
      styleOpacity: {
        opacity: 0
      }
    }
  },
  methods: {
    handleScroll: function(){
      let top = document.documentElement.scrollTop  || window.pageYOffset || document.body.scrollTop;
      if(top > 50){
        let opacity = top / 100;
        opacity = opacity > 1 ? 1 : opacity;
        this.styleOpacity.opacity = opacity;
        this.isShowHeader = true;
      }else{
        this.isShowHeader = false;
      }
    }
  },
  activated: function(){
    window.addEventListener('scroll', this.handleScroll, false);
  },
  deactivated: function(){
    window.removeEventListener('scroll', this.handleScroll, false);
  }
};
</script>

<style lang="stylus" scoped>
@import '~styles/variables.styl';
@import '~styles/mixins.styl';

.detail-header-wrap {
}

.back-link {
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.4rem;
  font-size: 0.32rem;
  text-align: center;
  line-height: 0.8rem;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
}

.detail-header {
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  right: 0;
  height: 0.88rem;
  text-align: center;
  line-height: 0.88rem;
  background-color: $headerBgColor;
  font-size: 0.32rem;
  color: #fff;
}

.detail-header .header-back{
  position: absolute;
  top: 0;
  left: 0;
  height: .88rem;
  text-indent: .2rem;
}
</style>